<script lang="ts" setup>
import { onMounted, ref } from 'vue'
import axios from 'axios'
import type { Ref } from 'vue'
import { useUserStore } from '@/stores/user'

import { onBeforeRouteLeave, onBeforeRouteUpdate } from 'vue-router'
onBeforeRouteLeave(() => {
  console.log('在导航离开渲染该组件的对应路由时调用');

})
onBeforeRouteUpdate(() => {
  console.log('在当前路由改变，但是该组件被复用时调用');

})


const user = useUserStore()

interface iLive {
  hn: number
  nickname: string
  online: number
  owner_uid: string
  room_id: number
  room_name: string
  room_src: string
  url: string
}

const liveList: Ref<iLive[]> = ref([])

onMounted(() => {
  // 直接请求的时候会遇到跨域问题，可以配置一个代理解决
  // http://open.douyucdn.cn/api/RoomApi/live
  axios.get('/api/RoomApi/live').then(res => {
    console.log(res);
    liveList.value = res.data.data
  })
})

// 退出登录按钮的点击事件
function logoutClick() {
  localStorage.removeItem('token')
  localStorage.removeItem('userid')
  localStorage.removeItem('loginState')
  user.changeUserId('')
  user.changeLoginState(false)
  // 进入登录页面
}
</script>
<template>
  <div class="box">
    <header class="header"> 我的 </header>
    <div class="content">

      <div class="userInfo">
        <h1 v-show="user.loginState"> 用户登录成功 </h1>
        <van-button type="primary" @click="logoutClick" v-if="user.loginState">退出登录</van-button>
        <van-button type="success" @click="$router.push('/login')" v-else>去登录</van-button>
      </div>


      <p v-for="item in liveList" :key="item.owner_uid">{{ item.room_name }}</p>
    </div>
  </div>
</template>
<style lang="scss" scoped>
.userInfo {
  width: 100%;
  height: 400px;
  background-color: aliceblue;
}
</style>
